<template>
<!--  用户浏览日志管理-->
    <div style="padding: 20px">
      <!-- 搜索区域 -->
      <div style="margin: 10px 0">
        <el-input
            v-model="search"
            placeholder="请输入关键字"
            style="width: 20%"
            clearable
        ></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="load"
        >查询</el-button
        >
      </div>
      <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          style="width: 100%"
      >
        <el-table-column prop="c_id" label="课程ID" sortable width="100"> </el-table-column>
        <el-table-column prop="c_name" label="课程名" width="150"> </el-table-column>
        <!-- <el-table-column prop="nickName" label="昵称"> </el-table-column> -->
        <!--      <el-table-column prop="sex" label="课程简介"> </el-table-column>-->
        <el-table-column prop="c_teacher" label="指导老师" width="150"> </el-table-column>
        <el-table-column prop="c_introduce" label="课程简介" width="350"></el-table-column>
        <el-table-column prop="c_checkTime" label="浏览时间" width="200"></el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="handleChange(scope.row)"
            >保存课程信息</el-button
            >
            <el-button
                size="mini"
                type="primary"
                plain
                @click="handleEdit(scope.row)"
            >编辑</el-button
            >
            <el-popconfirm
                title="确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
      <div style="margin: 10px 0">
        <el-dialog v-model="dialogVisible" title="新增课程" width="30%">
          <el-form :v-model="form" label-width="120px">
            <el-form-item label="课程名">
              <el-input v-model="form.cname" style="width: 80%" />
            </el-form-item>
            <el-form-item label="指导老师">
              <el-input v-model="form.cteacher" style="width: 80%" />
            </el-form-item>
            <el-form-item label="课程简介">
              <el-input
                  type="textarea"
                  v-model="form.introduce"
                  style="width: 80%"
              />
            </el-form-item>
          </el-form>
          <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save"> 提交 </el-button>
          </span>
          </template>
        </el-dialog>
      </div>
    </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "userLogManage",
  components: {},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: "",
      currentPage: 1,
      total: 10,
      tableData: [
        {
          c_id: "03",
          c_name: "Java",
          c_teacher: "王老师",
          c_introduce: "Java基础课程。",
          c_checkTime: "15:34",
        },
        {
          c_id: "06",
          c_name: "vue",
          c_teacher: "陈老师",
          c_introduce: "vue进阶课程。",
          c_checkTime: "17:34",
        },
        {
          c_id: "01",
          c_name: "C语言",
          c_teacher: "林老师",
          c_introduce: "C语言程序设计",
          c_checkTime: "09:04",
        },
        {
          c_id: "08",
          c_name: "Python",
          c_teacher: "夏恩发",
          c_introduce: "Python语言练习",
          c_checkTime: "15:34",
        },
        {
          c_id: "04",
          c_name: "大数据",
          c_teacher: "史湘云",
          c_introduce: "大数据与hadoop。",
          c_checkTime: "20:14",
        },
        {
          c_id: "02",
          c_name: "网络安全",
          c_teacher: "王建强",
          c_introduce: "网络安全课程",
          c_checkTime: "06:25",
        },
        {
          c_id: "13",
          c_name: "C++",
          c_teacher: "查理斯",
          c_introduce: "C++课程设计",
          c_checkTime: "18:54",
        }

      ],
    };
  },
  methods: {
    add() {
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
      request.post("/user", this.form).then((res) => {
        console.log(res);
      });
    },
    handleEdit() {},
    handleSizeChange() {},
    handleCurrentChange() {},
  },
}


</script>

<style scoped>
::v-deep .el-table {
  width: 100%;
}
.el-pagination {
  justify-content: center;
}
</style>